<template>
  <div class='box'>
     <div class='copy-user'>
         <span>支付宝账号：</span>
                  <el-input size='small' placeholder="zhongyiqili4@163.com" disabled></el-input>
                   <el-button class='tag-read' data-clipboard-text='zhongyiqili4@163.com' size='small' v-on:click='copy'>复制</el-button>
     </div>
     <div class='display-code'>
             <div>
                <img src="@/images/zfb.png" alt="">
             </div>
     </div>
     <p>转账完成后提交订单号</p>
      <div class='recharge'>
         <span>交易单号：</span>
                  <el-input size='small' placeholder="请输入交易单号" v-model='order'></el-input>
                   <el-button type='warning' size='small' v-on:click='topup'>充值</el-button>
     </div>
         <el-table
      :data="dataList"
      height='550'
      style="width: 100%">
      <el-table-column
         type="index"
         width="50">
          <template slot-scope='scope'>
                   <span>{{scope.$index + (form.pageIndex - 1) * form.pageSize + 1 }}</span>
          </template>
      </el-table-column>
      <el-table-column
        prop="created_time"
        label="日期">
      </el-table-column>
      <el-table-column
        prop="order"
        label="订单号">
      </el-table-column>
      <el-table-column
        prop="money"
        label="充值金额">
      </el-table-column>
      <el-table-column
        prop="state"
        label="审核状态">
      </el-table-column>
    </el-table>
    <!-- 分页 -->
      <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="form.pageIndex"
      :page-size="form.pageSize"
      layout="total, prev, pager, next, jumper"
      :total="count"
      style='margin-top:20px;'>
    </el-pagination>
  </div>
  </div>
</template>
<script>
import { recharge,rechargeHistory } from '@/pages/api/index.js'
import Clipboard from 'clipboard'
export default {
     data(){
        return{
          dataList:[],
          order:null,      //交易单号
          form:{
             type:1,
             pageIndex:1,   //页数
             pageSize:10,   //条数
          },
          count:0,       //总条数
        }
     },
     methods:{
       //复制功能
         copy(){
            var clipboard = new Clipboard('.tag-read')
                clipboard.on('success',e => {
                  this.$message.success('复制成功')
                  //释放内存
                  clipboard.destroy()
            })
            clipboard.on('error', e => {
                //不支持复制
                this.$message.warning('该浏览器不支持自动复制')
                //释放内存
                clipboard.destroy()
            })
         },
      //充值
         topup(){
             recharge({type:1,order:this.order}).then(res=>{
                   if(res.code == 0) {
                         this.$message.success('已提交')
                         this.init()
                   }else{
                      this.$message.error(res.msg)
                   }
             })
         },
      //页面初始化
         init(){
            rechargeHistory(this.form).then(res=>{
                 if(res.code == 0){
                      res.data.charge.forEach(item => {
                          if(item.state == 0){
                              item.state = '待审核'
                          }else if(item.state == 1){
                             item.state = '审核通过'
                          }else{
                             item.state = '审核拒绝'
                          }
                      })
                      this.dataList = res.data.charge
                      this.count = res.data.count
                 }else{
                    this.$message.warning(res.msg)
                 }
            })
         },
         handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
            this.form.pageSize = val
            this.init()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
           this.form.pageIndex = val
           this.init()
      }
     },
     created(){
         this.init()
     }
}
</script>
<style lang='scss' scoped>
   .box{
      width:100%;
      // height:100%;
      padding:0 20px;
      box-sizing:border-box;
      text-align:center;
      background-color: #fff;
   }
   .copy-user{
      width:100%;
      margin-top:20px;
   }
   .display-code{
       width:100%;
       height:200px;
       margin-top:30px;
       display:flex;
       justify-content:center;
       div{
          width:150px;
          height:200px;
          img{
             width:100%;
             height:100%;
          }
       }
   }
   p{
      margin-top:20px;
   }
   .recharge{
      margin-top:30px;
   }
      .el-input{
      width:200px
   }

</style>
